<template>
  <div class="body">
    <el-row class="mb8">
      <el-col :span="19">
        <el-button
          type="info"
          @click="shuaxin"
          icon="el-icon-refresh-right"
        ></el-button>
        <el-button
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          :disabled="showFlg"
          >导出</el-button
        >
      </el-col>
      <el-col :span="5" class="seach">
        <el-input
          v-model="params.keywords"
          placeholder="请输入文件名称"
        ></el-input>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="shuaxin"
        ></el-button>
      </el-col>
    </el-row>
    <!-- <el-button @click="$router.go(0)" type="info" icon="el-icon-refresh-right"></el-button> -->
    <!-- <el-button type="success" icon="el-icon-plus" @click="handleAdd">添加</el-button> -->
    <!-- <el-button type="primary" icon="el-icon-edit" @click="handleUpdate">编辑</el-button> -->
    <!-- <el-button type="danger" icon="el-icon-delete">删除</el-button> -->
    <!-- <el-button type="primary" icon="el-icon-upload2">导出</el-button> -->
    <el-table
      ref="multipleTable"
      :data="gkzblist"
      tooltip-effect="dark"
      class="table xinde"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column
        prop="proid"
        align="center"
        label="序号"
        @click="details"
        width="80"
      ></el-table-column>
      <el-table-column
        prop="biddingNumber"
        align="center"
        :show-overflow-tooltip="true"
        width="220"
        label="项目编号"
      ></el-table-column>
      <el-table-column
        prop="biddingProjectNumber"
        :show-overflow-tooltip="true"
        width="220"
        align="center"
        label="包号"
      ></el-table-column>
      <el-table-column
        prop="biddingProjectName"
        :show-overflow-tooltip="true"
        width="220"
        align="center"
        label="项目名称"
      ></el-table-column>
      <el-table-column
        prop="biddingType"
        align="center"
        :show-overflow-tooltip="true"
        width="220"
        label="采购方式"
      ></el-table-column>
      <el-table-column
        align="center"
        :show-overflow-tooltip="true"
        width="220"
        label="开标日期"
      >
        <template slot-scope="scope">
          <span v-show="scope.row.bidBeginTime == null"></span>
          <span v-show="scope.row.bidBeginTime != null">{{
            scope.row.bidBeginTime | dateFormat
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        width="220"
        align="center"
        label="截止日期"
      >
        <template slot-scope="scope">
          <span v-show="scope.row.bidEndTime == null"></span>
          <span v-show="scope.row.bidEndTime != null">{{
            scope.row.bidEndTime | dateFormat
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        width="220"
        prop="content"
        align="center"
        label="采购需求内容"
      ></el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        width="220"
        prop="marginAmount"
        align="center"
        label="预算金额"
      ></el-table-column>
      <el-table-column
        prop="source"
        align="center"
        label="信息来源"
      ></el-table-column>
      <el-table-column align="center" label="资金来源">
        <template slot-scope="scope">
          {{
            scope.row.moneysource == 0
              ? "政府资金"
              : scope.row.moneysource == 1
              ? "自筹资金"
              : "其他自己资金"
          }}
        </template>
      </el-table-column>
      <el-table-column width="220" fixed="right" align="center" label="操作">
        <template slot-scope="scope">
          <el-button @click="skipRoute(scope.row)" type="text" size="small"
            >申请</el-button
          >
          <el-button @click="cdetails(scope.row)" type="text" size="small"
            >查看详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增或修改 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="序号">
          <el-input v-model="form.id"></el-input>
        </el-form-item>
        <el-form-item label="项目编号">
          <el-input v-model="form.project_id"></el-input>
        </el-form-item>
        <el-form-item label="采购项目名称">
          <el-input v-model="form.project_name"></el-input>
        </el-form-item>
        <el-form-item label="采购方式">
          <el-input v-model="form.procurement_method"></el-input>
        </el-form-item>
        <el-form-item label="预算金额">
          <el-input v-model="form.money"></el-input>
        </el-form-item>
        <el-form-item label="包号">
          <el-input v-model="form.package_number"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确定</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 详情 -->
    <el-dialog :visible.sync="open1" width="60%" append-to-body>
      <el-form
        ref="form"
        :disabled="true"
        :model="form"
        :rules="rules"
        label-width="130px"
      >
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="项目编号:">
              <el-input
                v-model="formData.project_id"
                placeholder="请输入项目编号:"
                show-word-limit
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label-width="130px"
              label="采购项目名称："
              prop="project_name"
            >
              <el-input
                v-model="formData.project_name"
                placeholder="请输入采购项目名称："
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label-width="130px"
              label="采购方式："
              prop="procurement_method"
            >
              <el-input
                v-model="formData.procurement_method"
                placeholder="请输入采购方式："
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="130px" label="预算金额：" prop="money">
              <el-input
                v-model="formData.money"
                placeholder="请输入预算金额："
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label-width="130px"
              label="包号："
              prop="package_number"
            >
              <el-input
                v-model="formData.package_number"
                placeholder="请输入包号："
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label-width="130px"
              label="包名称："
              prop="package_name"
            >
              <el-input
                v-model="formData.package_name"
                placeholder="请输入包名称："
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item
              label-width="130px"
              label="项目联系人："
              prop="field118"
            >
              <el-input
                v-model="formData.field118"
                placeholder="请输入项目联系人："
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label-width="130px"
              label="项目联系方式："
              prop="field119"
            >
              <el-input
                v-model="formData.field119"
                placeholder="请输入项目联系方式："
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="bottom">
        <el-tabs type="border-card">
          <el-tab-pane>
            <span slot="label">采购需求</span>
            {{ formData.purchase_demand }}
          </el-tab-pane>
          <el-tab-pane label="申请人资格需求">{{
            formData.qualification
          }}</el-tab-pane>
          <el-tab-pane label="时间地点">
            <p>开标时间:{{ formData.bid_opening_time }}</p>
            <p>开标地点:{{ formData.bid_opening_addr }}</p>
          </el-tab-pane>
          <el-tab-pane label="采购人资料">
            <el-row :gutter="15">
              <el-form
                :disabled="true"
                ref="elForm"
                :model="formData"
                :rules="rules"
                size="medium"
                label-width="100px"
              >
                <el-col :span="12">
                  <el-form-item
                    label-width="180px"
                    label="采购人名称："
                    prop="purchase_person_name"
                  >
                    <el-input
                      v-model="formData.purchase_person_name"
                      placeholder="请输入采购人名称："
                      clearable
                      :style="{ width: '100%' }"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label-width="180px"
                    label="采购人地址:"
                    prop="purchase_person_addr"
                  >
                    <el-input
                      v-model="formData.purchase_person_addr"
                      placeholder="请输入采购人地址:"
                      clearable
                      :style="{ width: '100%' }"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label-width="180px"
                    label="采购人联系人："
                    prop="purchase_person_contact_name"
                  >
                    <el-input
                      v-model="formData.purchase_person_contact_name"
                      placeholder="请输入采购人联系人："
                      clearable
                      :style="{ width: '100%' }"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label-width="180px"
                    label="采购人联系方式："
                    prop="purchase_person_contact_mobile"
                  >
                    <el-input
                      v-model="formData.purchase_person_contact_mobile"
                      placeholder="请输入采购人联系方式："
                      clearable
                      :style="{ width: '100%' }"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label-width="180px"
                    label="采购代理机构名称："
                    prop="purchase_agent_name"
                  >
                    <el-input
                      v-model="formData.purchase_agent_name"
                      placeholder="请输入采购代理机构名称："
                      clearable
                      :style="{ width: '100%' }"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label-width="180px"
                    label="采购代理机构地址："
                    prop="purchase_agent_addr"
                  >
                    <el-input
                      v-model="formData.purchase_agent_addr"
                      placeholder="请输入采购代理机构地址："
                      clearable
                      :style="{ width: '100%' }"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label-width="180px"
                    label="采购代理机构联系人："
                    prop="purchase_agent_person"
                  >
                    <el-input
                      v-model="formData.purchase_agent_person"
                      placeholder="请输入采购代理机构联系人："
                      clearable
                      :style="{ width: '100%' }"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label-width="180px"
                    label="采购代理机构联系方式："
                    prop="purchase_agent_mobile"
                  >
                    <el-input
                      v-model="formData.purchase_agent_mobile"
                      placeholder="请输入采购代理机构联系方式："
                      clearable
                      :style="{ width: '100%' }"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-form>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
    <div class="block">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30]"
        :current-page.sync="params.pageNum"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { gkzb, exports, details } from "@/api/purchase.js";
export default {
  data() {
    return {
      //页面
      gkzblist: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      open1: false,
      // 表单参数
      form: {
        id: "",
        project_id: "",
        project_name: "",
        procurement_method: "",
        money: "",
        package_number: "",
        package_money: "",
        term: "",
      },
      formData: {},
      params: {
        pageNum: 1,
        pageSize: 10,
        keywords: "",
      },
      // 表单校验
      rules: {},
      // 分页
      total: null,
      multipleSelection: [],
      ids: [],
      showFlg: true,
    };
  },
  created() {
    this.gkzbs();
  },
  methods: {
    shuaxin() {
      this.gkzbs();
    },
    skipRoute(uid) {
      console.log("项目详情", uid);
      let {
        biddingName,
        proid,
        biddingNumber,
        bidderNoticeTime,
        purchasePersonName,
        companyName,
        marginAmount,
        biddingProjectName,
        bidEndTime,
        bidBeginTime,
      } = uid;
      sessionStorage.setItem("proid", proid); //当前选择标段id，存储后跳转下一不
      sessionStorage.setItem("projectid", proid);
      sessionStorage.setItem("bidding_name", biddingName); //当前选择标段id，存储后跳转下一不
      sessionStorage.setItem("proid", proid); //项目id
      sessionStorage.setItem("bidding_name", biddingNumber); //项目编号
      sessionStorage.setItem("bidding_project_name", biddingProjectName); //开标日期开标时间:{{ item.bidder_notice_time }}
      sessionStorage.setItem("purchase_person_name", purchasePersonName); //招标人
      sessionStorage.setItem("bidder_notice_time", bidderNoticeTime);
      sessionStorage.setItem("bid_begin_time", bidBeginTime); //开标日期
      sessionStorage.setItem("bid_end_time", bidEndTime); //截止时间
      sessionStorage.setItem("margin_amount", marginAmount); //预算金额
      // sessionStorage.setItem("unify_code", this.gongcheng.unify_code); //申请公司统一社会信信用代码
      // sessionStorage.setItem("apply_company_name", this.valse); //申请公司统一社会信信用代码
      sessionStorage.setItem("proid", uid.proid);
      sessionStorage.setItem("typeid", 4);
      sessionStorage.setItem("nametype", "投标保函");
      sessionStorage.setItem("bhlein", "投标保函");
      this.$router.push("/BidSecurity/financialInstitution");
      // this.$router.push({ path: '/BidSecurity/SelectALot/', query: { projectid: uid.proid }})
    },
    //页面
    gkzbs() {
      gkzb(this.params).then((response) => {
        console.log(response);
        this.gkzblist = response.data.rows;
        this.total = response.data.total;
        console.log(this.total);
      });
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        project_id: null,
        project_name: null,
        procurement_method: null,
        money: null,
        package_number: null,
        package_money: null,
        term: null,
      };
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    //新增按钮操作
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加档案架";
    },
    //修改
    handleUpdate() {
      this.open = true;
      this.title = "修改档案架";
    },
    //提交按钮
    onSubmit() {
      alert("submit!");
      this.open = false;
    },
    cdetails(rows) {
      details(rows.proid).then((res) => {
        console.log(res);
      });
      // return
      var bbc = JSON.stringify(rows);
      this.$router.push({ name: "zhaoxq", query: { params: bbc } });
      // this.open1 = true;
      // this.formData = rows;
    },
    details(row) {
      console.log(row);
      this.open1 = true;
      this.formData = row;
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.params.pageSize = val;
      this.gkzbs();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.params.pageNum = val;
      // this.params.offset = parseInt(val - 1) * this.params.limit;
      this.gkzbs();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      console.log(selection.length > 0);
      this.showFlg = !selection.length > 0;
      this.ids = selection.map((item) => item.proid);
      this.ids = this.ids.join(",");
      console.log(this.ids);
    },
    // 导出
    handleExport() {
      // exports({
      //   proid: this.ids,
      // }).then((res) => {
      //   console.log(res);
      // });
      this.download(
        "/system/bidding/export",
        {
          proid: this.ids,
        },
        `storeDevice_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>

<style scoped>
.body {
  /* width: 86vw;
  height: 91vh; */
}

.table {
  width: 100%;
  margin-top: 2vh;
}

.block {
  position: fixed;
  bottom: 20px;
  right: 20px;
}
</style>
